<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- [if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/index.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <header class="col-md-2">
        <div class="logo">
          <a href="#">
            <!-- 超小屏幕时显示文字 -->
            <img src="http://caodezhang.gitee.io/bootstrap.style.com/images/logo.png" alt="logo" class="hidden-xs">
            <span class="visible-xs">阿里百秀</span>
          </a>
        </div>
        <div class="nav">
          <!-- 小屏幕 超小屏幕时，nav里面的li浮动起来  并且宽度为20% -->
          <ul>
            <li><a href="#" class="nav-icon glyphicon glyphicon-camera">设计</a></li>
            <li><a href="#" class="nav-icon glyphicon glyphicon-phone-alt">咨询</a></li>
            <li><a href="#" class="nav-icon glyphicon glyphicon-inbox">生活汇</a></li>
            <li><a href="#" class="nav-icon glyphicon glyphicon-facetime-video">视频</a></li>
            <li><a href="#" class="nav-icon glyphicon glyphicon-th-large">综合导航</a></li>
          </ul>
        </div>
      </header>
      <article class="col-md-7">
        <div class="news clearfix">
          <ul>
            <li><a href="#"><img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-1.jpg" alt="">
                <p>卫星测绘地图</p>
              </a></li>
            <li><a href="#"><img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-2.jpg" alt="">
                <p>来自未来，宝马I8正式登陆</p>
              </a></li>
            <li><a href="#"><img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-3.jpg" alt="">
                <p>Arlo 家用摄像头：我能续航6个月</p>
              </a></li>
            <li><a href="#"><img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-4.jpg" alt="">
                <p>123456</p>
              </a></li>
            <li><a href="#"><img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-5.jpg" alt="">
                <p>3MOODS百点沙发，妈妈再也不怕空间不够了</p>
              </a></li>
          </ul>
        </div>
        <div class="publish">
          <div class="row">
            <div class="col-xs-9">
              <h1>宝马 Heisenberg XF1 电动自行车</h1>
              <p class="text-muted hidden-xs">admin 发布于 2020-05-08</p>
              <p class="hidden-xs">via：设计邦BMW电动车i3和i8中的"i"符号是宝马的子品牌， 该品牌主要代表着新能源汽车和新的移动解决方案。</p>
              <p class="text-muted">阅读(101) 查看评论 <span class="hidden-xs">标签：电动自行车 宝马公司 越野自行车 新能源汽车 解决方案</span></p>
            </div>
            <div class="col-xs-3 pic hidden-xs">
              <img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-1.jpg" alt="">
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <h1>宝马 Heisenberg XF1 电动自行车</h1>
              <p class="text-muted hidden-xs">admin 发布于 2020-05-08</p>
              <p class="hidden-xs">via：设计邦BMW电动车i3和i8中的"i"符号是宝马的子品牌， 该品牌主要代表着新能源汽车和新的移动解决方案。</p>
              <p class="text-muted">阅读(101) 查看评论 <span class="hidden-xs">标签：电动自行车 宝马公司 越野自行车 新能源汽车 解决方案</span></p>
            </div>
            <div class="col-xs-3 pic hidden-xs">
              <img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-1.jpg" alt="">
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <h1>宝马 Heisenberg XF1 电动自行车</h1>
              <p class="text-muted hidden-xs">admin 发布于 2020-05-08</p>
              <p class="hidden-xs">via：设计邦BMW电动车i3和i8中的"i"符号是宝马的子品牌， 该品牌主要代表着新能源汽车和新的移动解决方案。</p>
              <p class="text-muted">阅读(101) 查看评论 <span class="hidden-xs">标签：电动自行车 宝马公司 越野自行车 新能源汽车 解决方案</span></p>
            </div>
            <div class="col-xs-3 pic hidden-xs">
              <img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/news-1.jpg" alt="">
            </div>
          </div>
        </div>
      </article>
      <aside class="col-md-3">
        <a href="#" class="banner">
          <img src="http://caodezhang.gitee.io/bootstrap.style.com/upload/zgboke.jpg" alt="">
        </a>
        <a href="#" class="hot">
          <span class="btn btn-primary">热点</span>
          <h4 class="text-primary">欢迎加入中国博客联盟</h4>
          <p class="text-muted">您好，欢迎来到中国博客联盟！这里只收录优秀独立博客，纯手工审核机制！</p>
        </a>
      </aside>
    </div>
  </div>
</body>

</html>